<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pr="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="WEB-INF/facelets/template.xhtml">
        <ui:param name="customcss" value="style/product.css"/>

        <ui:param name="title" value="Product"/>

        <ui:define name="content">

            <div id="mainProduct">
                <h1 id="productName"><h:outputText value="#{productBacking.product.getName()}"/></h1>
                <div id="productContainer">

                    <div id="buyDiv">
                        <div id="price">
                            
                            <h:outputText value="Price: #{productBacking.product.price} #{productBacking.currency}"/><br/>
                            <h:outputText rendered="#{productBacking.product.discount > 0}" value="Discount: #{productBacking.product.discount} #{productBacking.currency}"/><br/>
                            <h:outputText rendered="#{productBacking.product.discount > 0}" value="Your price: #{productBacking.product.price-productBacking.product.discount} #{productBacking.currency}"/>
                            <br/>
                            
                        </div>
                        <div id="stock">
                            
                            <h:outputText value="In Stock: #{productBacking.product.getStock()}"/>
                            
                        </div>
                        <div id="attrContainer">
                            <div id="prodAttrName">
                                Available colors:
                            </div>
                            <h:form id="prodAttr">
                                <h:selectOneMenu id="attributeList">
                                    <f:selectItems value="#{productBacking.product.getGroupedWith()}"/>  
                                </h:selectOneMenu>
                            </h:form>
                            <h:form>
                                <pr:commandButton value="BUY" update="cartPanel" action="#{productBacking.addToCart()}" ajax="true"/>
                            </h:form>
                        </div>

                        <div id="description">
                            
                            <h:outputText value="#{productBacking.product.getDescription()}"/>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div id="productColumn">
                Link to other related products
            </div>
        </ui:define>
    </ui:composition>
</html>

